<template>
    <div class="body-bar">
        <div class="login-box">
            <img src="/src/assets/QQ20250711-101818.png" alt="">
            <div class="loginBar">
                <img src="/src/assets/QQ20250711-091925.png" alt="">
                <span>欢迎登陆</span>
                <div style="width: 335px;">
                    <el-form ref="ruleFormRef" :model="loginData" :rules="rules" label-width="0">
                        <el-form-item prop="phone" style="margin-bottom: 20px;">
                            <el-input v-model="loginData.phone" style="height: 44px;width: 335px; "></el-input>
                        </el-form-item>
                        <el-form-item prop="password" style="margin-bottom: 20px;">
                            <el-input v-model="loginData.password" style="height: 44px;width: 335px;"></el-input>
                        </el-form-item>
                        <div style="height: 18px;display: flex;align-items: center;" class="deal-bar">
                            <input type="checkbox" v-model="dealAgree" value="agree">
                            <p>我已阅读并同意<span>《用户隐私政策》</span></p>
                        </div>
                        <el-button @click="toLogin(ruleFormRef)">登录</el-button>
                    </el-form>

                    <span>忘记密码请联系管理员</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { toLoginApi } from '../../api/login';
import { useGlobalStore } from '../../store/global';
// import { log } from 'echarts/types/src/util/log.js';



const router = useRouter()

const loginData = ref({
    phone: '',
    password: ''
})

const dealAgree = ref([])

const rules = ref({
    phone: [
        { required: true, message: '账号不能为空', trigger: 'blur' },

    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        },
    ],
})

const ruleFormRef = ref()

// 登录
function onLogin() {
    toLoginApi(loginData.value)
        .then(res => {
            if (res.code == 200) {
                router.replace('/home')
                localStorage.doctor_token = res.token
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                })
            }
        })
}

const toLogin = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {

            onLogin()

            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>

<style scoped>
.body-bar {
    background-color: azure;
    min-height: 100vh;
    display: flex;
    align-items: center;
    width: 100%;
}

.login-box {
    height: 660px;
    width: 1200px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 8px;
    display: flex;

}

.login-box img {
    height: 660px;
    width: 600px;
}

.loginBar {
    width: 600px;
    height: 660px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loginBar img {
    width: 40px;
    height: 40px;
    margin-top: 120px;
    margin-bottom: 20px;
}

.loginBar>span {
    display: inline-block;
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: 550;
    color: #333;
}

.deal-bar {
    margin-bottom: 16px;
}

.deal-bar p {
    font-size: 13px;
    color: #c9c9c9;
}

.deal-bar span {
    font-size: 13px;
    color: #1377F2;
}

.login-box .el-button {
    width: 335px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: none;
    background-color: var(--el-color-primary);
    font-size: 16px;
    color: #fff;
}

.loginBar>div>span {
    display: block;
    width: 335px;
    margin: 0 auto;
    font-size: 13px;
    color: #CCCCCC;
    text-align: center;
}
</style>